<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_015_自定义指令</title>
    <style> 
        .radioClass{
            border:1px solid red;
            width:200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        刷新时，鼠标焦点默认在输入框2上<br />
        输入框1：<input type="text" /><br />
        输入框2：<input type="text" v-focus /><br />
        自定义指令：v-qwe="msg"，在数据data中定义msg等于hello，然后用bind定义行数，abc为行参，控制台打印abc，为一个对象
        对象的值为msg的值
        <br />
        输入框3：<input type="text" v-qwe="msg" ><br />
        计算属性（字符串反转）和函数的区别<br />
        <!-- 计算属性只要数据data中的msg属性的值不变，计算属性只会调用一次，第二次就是缓冲区域的，而函数每调用一次，都会执行一次 -->
        输入框4：<input type="text" v-model="msg" />
        <div>{{strFanZhuan}}</div>
        <div>{{strFanZhuan}}</div>
        <div>{{stringFanZhuan()}}</div>
        <div>{{stringFanZhuan()}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 自定义指令  
        //directive是自定义指令   inserted：也是固定写法
        Vue.directive("focus",{
            inserted:function(el){
                //el是默认传递的事件对象
                el.focus();
                el.value = "123";
            }
        });
        // 自定义指令  
        Vue.directive("qwe",{
            bind:function(el,abc,zxc){
                console.log(el);
                console.log("---------------------");
                console.log(abc);
                console.log("---------------------");
                console.log(zxc);
                el.style.background = abc.value;
            }
        });
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"yellow"
            },
            //computed 固定写的，意思是计算，试试看随便该asd好像不行
            computed:{
                //字符串反转
                strFanZhuan:function(){
                    console.log("1234");
                    return this.msg.split("").reverse().join("");
                }
            },
            methods:{
                //字符串反转
                stringFanZhuan:function(){
                    console.log("5678");
                    return this.msg.split("").reverse().join("");
                }
            }
        });

    </script>
</body>

</html></SCRIPT>